import React, { useEffect, useState } from 'react';
import "../../styles/liuhuan/detailsPage.scss"
// 导入标题组件
import Title from '../../component/liuhuan/Title'
// 接收路由参数
import { useLocation } from 'react-router-dom';
interface Props {

}

function DetailsPage(props: Props) {
    //接收动态路由参数 useLocation()
    let loction = useLocation()
    console.log(loction.state);
    
    return (
        <div className='detailsPage'>
            <Title title='患者信息'/>
            <div className='card'>
                <div className='patientInformation'>患者信息</div>
                <div className='content'>
                    <div>
                        <span>患者姓名</span>
                        <span>{loction.state && loction.state.patientName}</span>
                    </div>
                    <div>
                        <span>就诊卡号</span>
                        <span>{loction.state && loction.state.medicalCardNumber}</span>
                    </div>
                    <div>
                        <span>证件类型</span>
                        <span>身份证</span>
                    </div>
                    <div>
                        <span>证件号码</span>
                        <span>{loction.state && loction.state.idNumber}</span>
                    </div>
                    <div>
                        <span>家庭住址</span>
                        <span>{loction.state && loction.state.homeAddress}</span>
                    </div>
                    <div>
                        <span>手机号</span>
                        <span>{loction.state && loction.state.phone}</span>
                    </div>
                    <div>
                        <span>支付方式</span>
                        <span>{loction.state && loction.state.methodOfPayment }</span>
                    </div>
                    <div>
                        <span>卡内余额</span>
                        <span>{loction.state && loction.state.remainingSumInsideCard }</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default DetailsPage;